<template>
  <div>
    <!-- 根 -->
    <div class="top-div">
      <!-- <div v-for="(item,index) in usersMsgList" :key="index">
        
        用户名：{{ item.uname}}
    </div> -->
      <!-- 左侧图片Div -->
      <div class="banner-img-box">
        <img class="bannerImg" src="./images/BannerImg.jpg" />
      </div>
      <!-- 右侧图片Div及登录注册 -->
      <div class="sce-div">
        <!-- 顶部logoDiv -->
        <div class="header-img-box">
          <img class="header-img" src="./images/HeaderImg.jpg" />
        </div>
        <!-- 背景图Div -->
        <div class="background-img-box">
          <div class="login-div">
            <div class="login-registration">
              <div class="inside-login-registration">
                <div class="inside-header-title">
                  <!-- 账号-登录注册界面 -->
                  <div class="inside-header-button">
                    <!-- 登录按钮 -->
                    <div class="login-button" @click="loginClick()" :style="loginStyle">
                      <a class="a-login" href="#" :style="inLoginStyle">登录</a>
                    </div>
                    <!-- 注册按钮 -->
                    <div class="registration-button" @click="registrationClick()" :style="registrationStyle">
                      <a class="a-registration" href="#" :style="inRegistrationStyle">注册</a>
                    </div>
                  </div>
                </div>
                <!-- 登录界面 -->
                <div class="user-password-box" v-show="loginFlag">
                  <div class="login-box">
                    <div class="u-box">
                      <div class="UserPassword">
                        <div class="inside-box" :style="userStyle">
                          <input type="text" v-on:focus="userFocus()" v-on:blur="userBlur()" :style="insideUserStyle"
                            value="user" v-model="userMsgL.uaccount" required />
                          <label :style="ulStyle">邮箱/手机号码</label>
                        </div>
                      </div>
                      <div class="u-title" v-show="utFlag">请输入账号</div>
                    </div>
                    <div class="p-box">
                      <div class="UserPassword">
                        <div class="inside-box" :style="passwordStyle">
                          <input type="password" v-on:focus="passwordFocus()" v-on:blur="passwordBlur()"
                            :style="insidePasswordStyle" value="password" v-model="userMsgL.upwd" required />
                          <label :style="pltStyle">密码</label>
                        </div>
                      </div>
                      <div class="p-title" v-show="ptFlag">请输入登陆密码</div>
                    </div>
                    <div class="accept-terms">
                      <input type="checkbox" value="checked" v-model="checked" />
                      <span>已阅读并同意本站
                        <router-link to="./tip">服务协议</router-link>
                      </span>
                    </div>
                    <button class="go-in-box" :style="goinStyle" @click="userLogin()" >
                      登录
                    </button>
                    <div class="no-account-box">
                      <span @click="gotoRegistration()">还未注册?</span>
                    </div>
                  </div>
                </div>
                <!-- 注册界面 -->
                <div class="registration" v-show="registrationFlag">
                  <div class="registration-box">
                    <div class="r-u-box">
                      <div class="inside-r-u">
                        <div class="inside-r-u-box" :style="uStyle">
                          <input type="text" v-on:focus="uFocus()" v-on:blur="uBlur()" v-model="userMsg.uaccount"
                            :style="uiStyle" required />
                          <label :style="ultStyle">用户名</label>
                        </div>
                      </div>
                    </div>
                    <div class="r-n-box">
                      <div class="inside-r-n">
                        <div class="inside-r-n-box" :style="nStyle">
                          <input type="text" v-on:focus="nFocus()" v-on:blur="nBlur()" v-model="userMsg.uname"
                            :style="niStyle" required />
                          <label :style="nltStyle">真实姓名</label>
                        </div>
                      </div>
                    </div>
                    <div class="r-p-box">
                      <div class="inside-r-p">
                        <div class="inside-r-p-box" :style="pStyle">
                          <input type="password" v-on:focus="pFocus()" v-on:blur="pBlur()" v-model="userMsg.upwd"
                            :style="piStyle" required />
                          <label :style="pltStyle">输入密码</label>
                        </div>
                      </div>
                    </div>
                    <div class="r-tp-box">
                      <div class="inside-r-tp">
                        <div class="inside-r-tp-box" :style="tpStyle">
                          <input type="password" v-on:focus="tpFocus()" v-on:blur="tpBlur()" v-model="userMsg.upwdans"
                            :style="tpiStyle" required />
                          <label :style="tpltStyle">确认密码</label>
                        </div>
                      </div>
                    </div>
                    <div class="r-e-box">
                      <div class="inside-r-e">
                        <div class="inside-r-e-box" :style="eStyle">
                          <input type="text" v-on:focus="eFocus()" v-on:blur="eBlur()" v-model="userMsg.uemail"
                            :style="eiStyle" required />
                          <label :style="eltStyle">电子邮箱</label>
                        </div>
                      </div>
                    </div>
                    <div class="r-m-box">
                      <div class="inside-r-m">
                        <div class="inside-r-m-box" :style="mStyle">
                          <input type="text" v-on:focus="mFocus()" v-on:blur="mBlur()" v-model="userMsg.utel"
                            :style="miStyle" required />
                          <label :style="mltStyle">手机号码</label>
                        </div>
                      </div>
                    </div>
                    <div class="accept-terms-registration">
                      <input type="checkbox" value="" />
                      <span>已阅读并同意本站
                        <router-link to="./tip">服务协议</router-link>
                      </span>
                    </div>
                    <button class="go-registration-box" @click="userRegister()">
                      注册
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 2,
      loginFlag: true,
      registrationFlag: false,
      loginStyle: {
        color: "#ff5c00",
        borderBottom: "4px solid #ff5c00",
        textDecoration: "none",
      },
      registrationStyle: {
        textDecoration: "none",
      },
      inLoginStyle: {
        fontWeight: "700",
        color: "#000",
        textDecoration: "none",
      },
      inRegistrationStyle: {
        textDecoration: "none",
      },
      sex: "man",
      userStyle: "",
      passwordStyle: "",
      insideUserStyle: "",
      insidePasswordStyle: "",
      ptFlag: false,
      utFlag: false,
      ulStyle: "",
      uStyle: "",
      uiStyle: "",
      ultStyle: "",
      nStyle: "",
      niStyle: "",
      nltStyle: "",
      pStyle: "",
      piStyle: "",
      pltStyle: "",
      tpStyle: "",
      tpiStyle: "",
      tpltStyle: "",
      eStyle: "",
      eiStyle: "",
      eltStyle: "",
      mStyle: "",
      miStyle: "",
      mltStyle: "",
      checked: "",
      goinStyle: {},
      userMsg: {
        uaccount: "", //账号
        uemail: "", //邮箱
        upwd: "", //密码
        // uname: "", 
        // udelete: false,
        // ugender: "",
        // uid: 0,
        // uinfo: "",
        // uintegral: 0,
        upwdans: "",
        // upwdask: "",
        // uregtime: "",
        // uremarks: "",
        // utel: "",
      },
      userMsgL: {
        uaccount: "",
        upwd: "",
      }
      
    };
  },
  mounted() {
    // getUsersByPage({ commit },pageNum,pageSize)
    // this.$store.dispatch("getUsersByPage", {
    //   pageNum: this.pageNum,
    //   pageSize: this.pageSize,
    // });
  },
  methods: {
    gotoRegistration() {
      this.loginFlag = false;
      this.registrationFlag = true;
      this.loginStyle = {
        color: "#bbb",
        textDecoration: "none",
      };
      this.registrationStyle = {
        color: "#ff5c00",
        borderBottom: "4px solid #ff5c00",
        textDecoration: "none",
      };
      this.inLoginStyle = {
        fontWeight: "400",
        color: "#bbb",
        textDecoration: "none",
      };
      this.inRegistrationStyle = {
        fontWeight: "700",
        color: "#000",
        textDecoration: "none",
      };
    },
    loginClick() {
      this.loginFlag = true;
      this.registrationFlag = false;
      this.loginStyle = {
        color: "#ff5c00",
        borderBottom: "4px solid #ff5c00",
        textDecoration: "none",
      };
      this.registrationStyle = {
        color: "#bbb",
        textDecoration: "none",
      };
      this.inLoginStyle = {
        fontWeight: "700",
        color: "#000",
        textDecoration: "none",
      };
      this.inRegistrationStyle = {
        fontWeight: "400",
        color: "#bbb",
        textDecoration: "none",
      };
    },
    registrationClick() {
      this.loginFlag = false;
      this.registrationFlag = true;
      this.loginStyle = {
        color: "#bbb",
        textDecoration: "none",
      };
      this.registrationStyle = {
        color: "#ff5c00",
        borderBottom: "4px solid #ff5c00",
        textDecoration: "none",
      };
      this.inLoginStyle = {
        fontWeight: "400",
        color: "#bbb",
        textDecoration: "none",
      };
      this.inRegistrationStyle = {
        fontWeight: "700",
        color: "#000",
        textDecoration: "none",
      };
    },
    userFocus() {
      this.userStyle = {
        backgroundColor: "#fff",
        border: "1px solid #ff5c00",
      };
      this.insideUserStyle = {
        backgroundColor: "#fff",
      };
    },
    userBlur() {
      this.userStyle = {
        backgroundColor: "#f9f9f9",
      };
      this.insideUserStyle = {
        backgroundColor: "#f9f9f9",
      };
      if (this.userMsgL.uaccount == "") {
        this.utFlag = true;
        this.ulStyle = {
          color: "#f04645",
        };
        this.userStyle = {
          backgroundColor: "rgb(252, 242, 243)",
        };
        this.insideUserStyle = {
          backgroundColor: "rgb(252, 242, 243)",
        };
      } else {
        this.utFlag = false;
        this.ulStyle = {
          color: "#bbb",
        };
      }
    },
    passwordFocus() {
      this.passwordStyle = {
        backgroundColor: "#fff",
        border: "1px solid #ff5c00",
      };
      this.insidePasswordStyle = {
        backgroundColor: "#fff",
      };
    },
    passwordBlur() {
      this.passwordStyle = {
        backgroundColor: "#f9f9f9",
      };
      this.insidePasswordStyle = {
        backgroundColor: "#f9f9f9",
      };
      if (this.userMsgL.upwd == "") {
        this.ptFlag = true;
        this.plStyle = {
          color: "#f04645",
        };
        this.passwordStyle = {
          backgroundColor: "rgb(252, 242, 243)",
        };
        this.insidePasswordStyle = {
          backgroundColor: "rgb(252, 242, 243)",
        };
      } else {
        this.ptFlag = false;
        this.plStyle = {
          color: "#bbb",
        };
      }
    },
    uFocus() {
      this.uStyle = {
        backgroundColor: "#fff",
        border: "1px solid #ff5c00",
      };
      this.uiStyle = {
        backgroundColor: "#fff",
      };
    },
    uBlur() {
      this.uStyle = {
        backgroundColor: "#f9f9f9",
      };
      this.uiStyle = {
        backgroundColor: "#f9f9f9",
      };
    },
    nFocus() {
      this.nStyle = {
        backgroundColor: "#fff",
        border: "1px solid #ff5c00",
      };
      this.niStyle = {
        backgroundColor: "#fff",
      };
    },
    nBlur() {
      this.nStyle = {
        backgroundColor: "#f9f9f9",
      };
      this.niStyle = {
        backgroundColor: "#f9f9f9",
      };
    },
    pFocus() {
      this.pStyle = {
        backgroundColor: "#fff",
        border: "1px solid #ff5c00",
      };
      this.piStyle = {
        backgroundColor: "#fff",
      };
    },
    pBlur() {
      this.pStyle = {
        backgroundColor: "#f9f9f9",
      };
      this.piStyle = {
        backgroundColor: "#f9f9f9",
      };
    },
    tpFocus() {
      this.tpStyle = {
        backgroundColor: "#fff",
        border: "1px solid #ff5c00",
      };
      this.tpiStyle = {
        backgroundColor: "#fff",
      };
    },
    tpBlur() {
      this.tpStyle = {
        backgroundColor: "#f9f9f9",
      };
      this.tpiStyle = {
        backgroundColor: "#f9f9f9",
      };
    },
    eFocus() {
      this.eStyle = {
        backgroundColor: "#fff",
        border: "1px solid #ff5c00",
      };
      this.eiStyle = {
        backgroundColor: "#fff",
      };
    },
    eBlur() {
      this.eStyle = {
        backgroundColor: "#f9f9f9",
      };
      this.eiStyle = {
        backgroundColor: "#f9f9f9",
      };
    },
    mFocus() {
      this.mStyle = {
        backgroundColor: "#fff",
        border: "1px solid #ff5c00",
      };
      this.miStyle = {
        backgroundColor: "#fff",
      };
    },
    mBlur() {
      this.mStyle = {
        backgroundColor: "#f9f9f9",
      };
      this.miStyle = {
        backgroundColor: "#f9f9f9",
      };
    },
  
     async userRegister() {
        //   const { phone, code, password, password1 } = this;
            let a = await this.$store.dispatch("register",
            {
                uaccount:this.userMsg.uaccount,
                uemail:this.userMsg.uemail,
                upwd:this.userMsg.upwd,
                uname:this.userMsg.uname,
                udelete: this.userMsg.udelete,
                ugender: this.userMsg.ugender,
                uid: 0,
                uinfo: this.userMsg.uinfo,
                uintegral: 0,
                upwdans: this.userMsg.upwdans,
                upwdask: this.userMsg.upwdask,
                uregtime: this.userMsg.uregtime,
                uremarks: this.userMsg.uremarks,
                utel: this.userMsg.utel
                
            }
            );
            console.log(a)
            if( a == 200 ){
              this.loginClick()//切换为注册
            }
        },
         async userLogin(){
            let b = await this.$store.dispatch("login",{
                uaccount:this.userMsgL.uaccount,
                upwd:this.userMsgL.upwd,
            })
            console.log(b)
          
            if( b == 200 ){
              console.log("登录成功")
              this.$router.push("/");//跳转到主页
            }
        },
        
  },
  computed: {

    }
}

</script>

<style lang="less">
body {
  margin: 0;
}

.no-account-box {
  width: 100%;
  height: 36.7px;
  text-align: right;

  span {
    color: #ff5c00;
    font-size: 17px;
  }
}

.go-registration-box {
  width: 100%;
  height: 60px;
  margin: 5px 0px 0px;
  padding: 0px 20px;
  background: #ff5c00;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  border: 0px;
  border-radius: 4px;
  /* opacity: .4; */
  /* transition: all .3s cubic-bezier(0.65, 0.05, 0.36, 1); */
}

.accept-terms-registration {
  width: 100%;
  height: 25px;
  /* margin: 10px 0px 0px; */
}

.accept-terms-registration input {
  width: 20px;
  height: 20px;
}

.accept-terms-registration span {
  position: relative;
  top: -2px;
  font-size: 14px;
  padding: 0px 4px;
  color: #aaa;
  font-family: "MiSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.accept-terms-registration span a {
  color: #333;
  text-decoration: none;
}

.sex {
  font-size: 13px;
  color: #bbb;
}

.sex-box {
  width: 100%;
  margin: 0px 0px 5px 0px;
}

.registration {
  width: 100%;
  height: 415px;
  padding: 10px 2px 0px;
}

.go-in-box {
  width: 100%;
  height: 60px;
  margin: 20px 0px 10px;
  padding: 0px 20px;
  background: #ff5c00;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  border: 0px;
  border-radius: 4px;
  /* opacity: 0.4; */
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.a-login {
  /* font-weight: 700;
  color: #000; */
  text-decoration: none;
  font-size: 22px;
  font-family: "MiSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.a-registration {
  font-weight: 400;
  color: #bbb;
  text-decoration: none;
  font-size: 22px;
  font-family: "MiSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.top-div {
  width: 100%;
  height: 971px;
  display: flex;
}

.banner-img-box {
  width: 375px;
  height: 100%;
}

.bannerImg {
  width: 375px;
  height: 971px;
}

.sce-div {
  width: 100%;
  height: 100%;
}

.header-img-box {
  width: 100%;
  height: 40px;
  padding: 20px;
  display: grid;
  place-items: center;
}

.header-img {
  width: 90px;
  height: 40px;
}

.background-img-box {
  width: 100%;
  height: 891px;
  background-image: url(./images/BackGroundImg.png);
}

.login-div {
  width: 100%;
  height: 654.7px;
  padding-top: 104.5px;
  display: grid;
  place-items: center;
}

.login-registration {
  width: 360px;
  height: 488.7px;
  margin: 0px 0px 80px;
  padding: 40px 45px;
  background-color: #fff;
}

.inside-login-registration {
  width: 360px;
  height: 488.7px;
}

.inside-header-title {
  width: 360px;
  height: 41px;
  display: flex;
  padding: 0px 0px 15px 0px;
}

.inside-header-button {
  width: 128px;
  height: 41px;
}

.login-button {
  width: 44px;
  height: 33px;
  margin: 0px 20px 0px 0px;
  padding: 0px 0px 4px;
  text-align: center;
  /* color: #ff5c00; */
  text-shadow: 0 0 0.25px currentColor;
  /* border-bottom: 4px solid #ff5c00; */
  line-height: 35px;
  display: inline-block;
}

.registration-button {
  width: 44px;
  height: 33px;
  margin: 0px 20px 0px 0px;
  padding: 0px 0px 4px;
  text-align: center;
  /* color: #bbb; */
  text-shadow: 0 0 0.25px currentColor;
  /* border-bottom:4px solid #ff5c00; */
  line-height: 35px;
  display: inline-block;
}

.insideUserPasswordBox {
  width: 356px;
  height: 315.7px;
  padding: 20px 2px 0px;
}

.user-password-box {
  width: 100%;
  height: 365.7px;
  padding: 20px 2px 0px;
}

.u-box {
  width: 100%;
  height: 92px;
}

.u-title {
  width: 100%;
  height: 20px;
  margin: 10px 0px 0px;
  color: #f04649;
  font-size: 12px;
  font-family: "MiSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.p-box {
  margin: 20px 0px 0px;
  width: 100%;
  height: 92px;
}

.p-title {
  width: 100%;
  height: 20px;
  margin: 10px 0px 0px;
  color: #f04649;
  font-size: 12px;
  font-family: "MiSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 输入框动画 */
.login-box {
  position: relative;
  top: 0;
  left: 0;
  /* width: 356px; */
  /* padding: 40px; */
  /* transform: translate(-50%, -50%); */
  /* background: rgba(0,0,0,.5); */
  /* box-sizing: border-box; */
  /* box-shadow: 0 15px 25px rgba(0,0,0,.6); */
}

.login-box .UserPassword {
  position: relative;
}

.login-box .UserPassword .inside-box {
  width: 356px;
  height: 62px;
  /* padding: 10px 0; */
  font-size: 20px;
  color: #000;
  /* margin-bottom: 30px; */
  border: none;
  /* border: 1px solid #bbb; */
  outline: none;
  /* background: transparent; */
  background-color: #f9f9f9;
  border-radius: 5px;
}

.login-box .UserPassword input {
  position: relative;
  left: 17px;
  top: 20px;
  border: none;
  outline: none;
  width: 320px;
  height: 40px;
  font-size: 25px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
}

.login-box .UserPassword label {
  position: absolute;
  top: 10px;
  left: 20px;
  padding: 10px 0;
  font-size: 17px;
  color: #bbb;
  pointer-events: none;
  transition: 0.2s;
}

.login-box .UserPassword input:focus~label,
.login-box .UserPassword input:valid~label {
  top: -3px;
  left: 20px;
  color: #bbb;
  font-size: 12px;
}

/* 服务协议勾选框 */
.accept-terms {
  width: 100%;
  height: 25px;
  margin: 20px 0px 0px;
}

.accept-terms input {
  width: 20px;
  height: 20px;
}

.accept-terms span {
  position: relative;
  top: -2px;
  font-size: 14px;
  padding: 0px 4px;
  color: #aaa;
  font-family: "MiSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.accept-terms span a {
  color: #333;
  text-decoration: none;
}

input[type="checkbox"] {
  cursor: pointer;
  position: relative;
}

input[type="checkbox"]::after {
  position: absolute;
  top: 0;
  background-color: #f9f9f9;
  color: #fff;
  width: 20px;
  height: 20px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: " ";
  border-radius: 2px;
  box-sizing: border-box;
  border: 1px solid rgb(212, 209, 209);
  border-radius: 3px;
}

input[type="checkbox"]:checked::after {
  content: "";
  background-color: #ff5c00;
  /* border-color: #037DF3; */
  /* background-color: #037DF3; */
}

input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 8px;
  width: 2px;
  height: 6px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  z-index: 1;
}

/* 用户名 */
.r-u-box {
  width: 100%;
  margin: 0px 0px 15px 0px;
  /* height: 92px; */
}

.registration-box {
  position: relative;
  top: 0;
  left: 0;
  /* width: 356px; */
  /* padding: 40px; */
  /* transform: translate(-50%, -50%); */
  /* background: rgba(0,0,0,.5); */
  /* box-sizing: border-box; */
  /* box-shadow: 0 15px 25px rgba(0,0,0,.6); */
}

.registration-box .inside-r-u {
  position: relative;
}

.registration-box .inside-r-u .inside-r-u-box {
  width: 356px;
  height: 40px;
  /* padding: 10px 0; */
  font-size: 20px;
  color: #000;
  /* margin-bottom: 30px; */
  border: none;
  /* border: 1px solid #bbb; */
  outline: none;
  /* background: transparent; */
  background-color: #f9f9f9;
  border-radius: 5px;
}

.registration-box .inside-r-u input {
  position: relative;
  left: 17px;
  top: 8px;
  border: none;
  outline: none;
  width: 320px;
  height: 30px;
  font-size: 17px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
}

.registration-box .inside-r-u label {
  position: absolute;
  top: 0px;
  left: 20px;
  padding: 10px 0;
  font-size: 15px;
  color: #bbb;
  pointer-events: none;
  transition: 0.2s;
}

.registration-box .inside-r-u input:focus~label,
.registration-box .inside-r-u input:valid~label {
  top: -10px;
  left: 20px;
  color: #bbb;
  font-size: 12px;
}

/* 真实姓名 */
.r-n-box {
  width: 100%;
  margin: 0px 0px 15px 0px;
  /* height: 92px; */
}

.registration-box .inside-r-n {
  position: relative;
}

.registration-box .inside-r-n .inside-r-n-box {
  width: 356px;
  height: 40px;
  /* padding: 10px 0; */
  font-size: 20px;
  color: #000;
  /* margin-bottom: 30px; */
  border: none;
  /* border: 1px solid #bbb; */
  outline: none;
  /* background: transparent; */
  background-color: #f9f9f9;
  border-radius: 5px;
}

.registration-box .inside-r-n input {
  position: relative;
  left: 17px;
  top: 8px;
  border: none;
  outline: none;
  width: 320px;
  height: 30px;
  font-size: 17px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
}

.registration-box .inside-r-n label {
  position: absolute;
  top: 0px;
  left: 20px;
  padding: 10px 0;
  font-size: 15px;
  color: #bbb;
  pointer-events: none;
  transition: 0.2s;
}

.registration-box .inside-r-n input:focus~label,
.registration-box .inside-r-n input:valid~label {
  top: -10px;
  left: 20px;
  color: #bbb;
  font-size: 12px;
}

/* 密码 */
.r-p-box {
  width: 100%;
  margin: 0px 0px 15px 0px;
  /* height: 92px; */
}

.registration-box .inside-r-p {
  position: relative;
}

.registration-box .inside-r-p .inside-r-p-box {
  width: 356px;
  height: 40px;
  /* padding: 10px 0; */
  font-size: 20px;
  color: #000;
  /* margin-bottom: 30px; */
  border: none;
  /* border: 1px solid #bbb; */
  outline: none;
  /* background: transparent; */
  background-color: #f9f9f9;
  border-radius: 5px;
}

.registration-box .inside-r-p input {
  position: relative;
  left: 17px;
  top: 8px;
  border: none;
  outline: none;
  width: 320px;
  height: 30px;
  font-size: 17px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
}

.registration-box .inside-r-p label {
  position: absolute;
  top: 0px;
  left: 20px;
  padding: 10px 0;
  font-size: 15px;
  color: #bbb;
  pointer-events: none;
  transition: 0.2s;
}

.registration-box .inside-r-p input:focus~label,
.registration-box .inside-r-p input:valid~label {
  top: -10px;
  left: 20px;
  color: #bbb;
  font-size: 12px;
}

/* 确认密码 */
.r-tp-box {
  width: 100%;
  margin: 0px 0px 15px 0px;
  /* height: 92px; */
}

.registration-box .inside-r-tp {
  position: relative;
}

.registration-box .inside-r-tp .inside-r-tp-box {
  width: 356px;
  height: 40px;
  /* padding: 10px 0; */
  font-size: 20px;
  color: #000;
  /* margin-bottom: 30px; */
  border: none;
  /* border: 1px solid #bbb; */
  outline: none;
  /* background: transparent; */
  background-color: #f9f9f9;
  border-radius: 5px;
}

.registration-box .inside-r-tp input {
  position: relative;
  left: 17px;
  top: 8px;
  border: none;
  outline: none;
  width: 320px;
  height: 30px;
  font-size: 17px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
}

.registration-box .inside-r-tp label {
  position: absolute;
  top: 0px;
  left: 20px;
  padding: 10px 0;
  font-size: 15px;
  color: #bbb;
  pointer-events: none;
  transition: 0.2s;
}

.registration-box .inside-r-tp input:focus~label,
.registration-box .inside-r-tp input:valid~label {
  top: -10px;
  left: 20px;
  color: #bbb;
  font-size: 12px;
}

/* 手机号码 */
.r-m-box {
  width: 100%;
  margin: 0px 0px 15px 0px;
  /* height: 92px; */
}

.registration-box .inside-r-m {
  position: relative;
}

.registration-box .inside-r-m .inside-r-m-box {
  width: 356px;
  height: 40px;
  /* padding: 10px 0; */
  font-size: 20px;
  color: #000;
  /* margin-bottom: 30px; */
  border: none;
  /* border: 1px solid #bbb; */
  outline: none;
  /* background: transparent; */
  background-color: #f9f9f9;
  border-radius: 5px;
}

.registration-box .inside-r-m input {
  position: relative;
  left: 17px;
  top: 8px;
  border: none;
  outline: none;
  width: 320px;
  height: 30px;
  font-size: 17px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
}

.registration-box .inside-r-m label {
  position: absolute;
  top: 0px;
  left: 20px;
  padding: 10px 0;
  font-size: 15px;
  color: #bbb;
  pointer-events: none;
  transition: 0.2s;
}

.registration-box .inside-r-m input:focus~label,
.registration-box .inside-r-m input:valid~label {
  top: -10px;
  left: 20px;
  color: #bbb;
  font-size: 12px;
}

/* 电子邮箱 */
.r-e-box {
  width: 100%;
  margin: 0px 0px 15px 0px;
  /* height: 92px; */
}

.registration-box .inside-r-e {
  position: relative;
}

.registration-box .inside-r-e .inside-r-e-box {
  width: 356px;
  height: 40px;
  /* padding: 10px 0; */
  font-size: 20px;
  color: #000;
  /* margin-bottom: 30px; */
  border: none;
  /* border: 1px solid #bbb; */
  outline: none;
  /* background: transparent; */
  background-color: #f9f9f9;
  border-radius: 5px;
}

.registration-box .inside-r-e input {
  position: relative;
  left: 17px;
  top: 8px;
  border: none;
  outline: none;
  width: 320px;
  height: 30px;
  font-size: 17px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
}

.registration-box .inside-r-e label {
  position: absolute;
  top: 0px;
  left: 20px;
  padding: 10px 0;
  font-size: 15px;
  color: #bbb;
  pointer-events: none;
  transition: 0.2s;
}

.registration-box .inside-r-e input:focus~label,
.registration-box .inside-r-e input:valid~label {
  top: -10px;
  left: 20px;
  color: #bbb;
  font-size: 12px;
}
</style>
